<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>排课信息 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="1-2" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="课程名称">
                                <el-select v-model="info.courseId" filterable placeholder="请选择课程名称" @change="changeCourse">
                                    <template v-for="item in courses">
                                        <el-option :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                            <div class="topic-list">
                                <div class="topic-item" v-for="(item, index) in topicsToAdd">
                                    <el-form-item label="主题">
                                        <el-select v-model="item.name" filterable placeholder="请选择主题" allow-create filterable default-first-option>
                                            <el-option v-for="(topic, index) in topics" :key="index" :label="topic" :value="topic">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="日期">
                                        <el-date-picker v-model="item.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="时间">
                                        <template>
                                            <el-time-select placeholder="起始时间" v-model="item.startTime" :picker-options="{ start: '09:00', step: '00:05', end: '21:00' }">
                                            </el-time-select>
                                            <!-- <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '06:00', step: '00:05', end: '23:30', minTime: startTime }">
                                            </el-time-select> -->
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="课程时长">
                                        <el-select v-model="item.courseTime" placeholder="请选择">
                                            <el-option :label="time+'分钟'" :value="time" :key="time" v-for='time in times'></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="老师">
                                        <el-radio-group v-model="item.type" size="small">
                                            <el-radio-button :label="0">选择</el-radio-button>
                                            <el-radio-button :label="1">新增</el-radio-button>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="" v-if="item.type == 0">
                                        <el-select v-model="item.staffId" filterable placeholder="请选择老师">
                                            <el-option v-for="(item, index) in staffs" :key="index" :label="item.englishName" :value="item.id">{{item.englishName}}({{item.name}})</span><span v-if='item.isPartTime' style="color: red">兼职</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" v-if="item.type == 1">
                                        <el-input v-model="item.teacherName" placeholder="请输入老师名字"></el-input>
                                    </el-form-item>
                                    <div class="topic-del" @click="delTopic(index)" v-if="topicsToAdd.length > 1">
                                        <i class="el-icon-close"></i>
                                    </div>
                                </div>
                                <div class="topic-add">
                                    <el-button @click="addTopic" type="text" size="small"><i class="el-icon-plus"></i>添加主题</el-button>
                                </div>
                            </div>
                            <el-form-item label="教室">
                                <el-input v-model="info.classroom"></el-input>
                            </el-form-item>
                            <el-form-item label="校区">
                                <el-select v-model="info.schoolId" placeholder="请选择校区">
                                    <el-option v-for="(item, index) in schools" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label='限定人数'>
                                <el-switch v-model="isLimit" active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="最大人数" v-if='isLimit'>
                                <el-input v-model="selectedLimit" type="number"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="是否隐藏">
                                <el-radio-group v-model="info.isHide">
                                    <el-radio :label="0">否</el-radio>
                                    <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                            <el-form-item label='是否隐藏'>
                                <el-switch v-model="isHide" active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                            <!-- select student start -->
                            <div style="padding: 0 2rem 1rem 2rem; font-size: 14px;">添加学生</div>
                            <div style="display: flex; align-items: center; margin-bottom: 1rem;">
                                <el-input v-model="keyword" placeholder="请输入搜索内容" class="search-input"></el-input>
                                <el-button type="primary" @click="searchStudent"><i class="el-icon-search"></i>&nbsp;搜索</el-button>
                            </div>
                            <div class="table-container">
                                <el-tabs v-model="selectedTab" @tab-click="onTabChange">
                                    <el-tab-pane v-for="(item, index) in tabs" :label="item" :name="item"></el-tab-pane>
                                </el-tabs>
                                <el-table :data="list1" tooltip-effect="dark" style="width: 100%;" @selection-change="onSelectedStudent1Change">
                                    <el-table-column type="selection" width="55">
                                    </el-table-column>
                                    <el-table-column prop="code" label="编号" sortable>
                                    </el-table-column>
                                    <el-table-column prop="name" label="姓名" sortable>
                                        <template slot-scope="scope">
                                            <span>{{scope.row.name}}</span><span v-if='scope.row.isBlackList==1' title="黑名单" style="color: red">[黑名单]</span><span v-if='scope.row.isDemo==1' title="Demo">[Demo]</span><span v-if='scope.row.isVIP==1' title="VIP">[VIP]</span><span v-if='scope.row.isDisable==1' title="已禁用">[已禁用]</span><span v-if='scope.row.isLeave==1' title="已离校">[已离校]</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="englishName" label="英文名" sortable>
                                    </el-table-column>
                                    <el-table-column prop="tag" label="等级" sortable>
                                    </el-table-column>
                                    <el-table-column prop="mobile" label="电话" sortable>
                                    </el-table-column>
                                    <el-table-column prop="schoolName" label="校区" sortable>
                                    </el-table-column>
                                </el-table>
                                <div class="buttons">
                                    <el-button type="primary" @click="onAddStudent">添加</el-button>
                                    <el-button @click="">取消选择</el-button>
                                </div>
                            </div>
                            <div class="table-container">
                                <div class="added-info">
                                    <span style="color: #e77115; margin-right: 2rem;">已添加</span>
                                    <span v-if="isLimit">{{ list2.length }} / {{ selectedLimit }}</span>
                                    <span v-else>{{ list2.length }} / 不限</span>
                                </div>
                                <el-table :data="list2" tooltip-effect="dark" style="width: 100%;" @selection-change="onSelectedStudent2Change">
                                    <el-table-column type="selection" width="55">
                                    </el-table-column>
                                    <el-table-column prop="code" label="编号" sortable>
                                    </el-table-column>
                                    <el-table-column prop="name" label="姓名" sortable>
                                        <template slot-scope="scope">
                                            <span>{{scope.row.name}}</span><span v-if='scope.row.isBlackList==1' title="黑名单" style="color: red">[黑名单]</span><span v-if='scope.row.isDemo==1' title="Demo">[Demo]</span><span v-if='scope.row.isVIP==1' title="VIP">[VIP]</span><span v-if='scope.row.isDisable==1' title="已禁用">[已禁用]</span><span v-if='scope.row.isLeave==1' title="已离校">[已离校]</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="englishName" label="英文名" sortable>
                                    </el-table-column>
                                    <el-table-column prop="tag" label="等级" sortable>
                                    </el-table-column>
                                    <el-table-column prop="mobile" label="电话" sortable>
                                    </el-table-column>
                                    <el-table-column prop="schoolName" label="校区" sortable>
                                    </el-table-column>
                                </el-table>
                                <div class="buttons">
                                    <el-button type="danger" @click="onCancelStudent">取消选课</el-button>
                                </div>
                            </div>
                            <!-- select student end -->
                            <el-form-item>
                                <el-button type="primary" @click="submit(false)">提交</el-button>
                                <el-button @click="back">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script src="https://cdn.bootcss.com/json5/0.5.1/json5.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>
    <script>
    function initData(vue) {
        // console.log(vue.schools)

    }
    </script>
    <script type="text/javascript">
    var ctrl = this;
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                courses: [],
                topics: [],
                staffs: [],
                schools: [],
                selectedTopic: '',
                selectedCourseTime: 60,
                selectedLimit: 0,
                date: '',
                startTime: '',
                endTime: '',
                teacherType: 0,
                courseTime: 80,
                times: [60, 90, 120],
                isLimit: true,
                isHide: false,
                topicsToAdd: [
                    { name: '', date: '', startTime: '', courseTime: 60 ,type:0,teacherName:'', staffId:null}
                ],
                // add students
                keyword: '',
                tabs: [],
                selectedTab: 'tab0',
                list1: [],
                list2: [],
                multipleSelectionList1: [],
                multipleSelectionList2: []
                // add students end
            }
        },
        watch: {
            teacherType: function(val) {
                if (val == 1) {
                    this.info.staffId = null;
                } else {
                    this.info.partTimeTeacherName = '';
                }
            }
        },
        mounted: function() {
            // var format = require('date-fns/format')
            // var today = $.format.date(new Date(), "yyyy-MM-dd")
            // alert(today)
            var schoolStr = '${schools!}';
            var courseStr = '${courses!}';
            var staffStr = '${staffs!}';
            var tagStr = '${tags!}';
            // var infoStr = '${info!}';
            if (schoolStr != '') {
                this.schools = JSON5.parse(schoolStr);
            }
            if (courseStr != '') {
                this.courses = JSON5.parse(courseStr);
            }
            if (staffStr != '') {
                this.staffs = JSON5.parse(staffStr);
            }
            if (tagStr != '') {
                this.tabs = tagStr.split(",");
                this.tabs.pop();
                this.tabs.push("全部");
                if (this.tabs.length > 0) {
                    this.selectedTab = this.tabs[this.tabs.length - 1];
                }
            }
            // if (infoStr != '') {
            //     this.info = JSON.parse(infoStr); //JSON.parse(infoStr);
            //     this.selectedTopic = this.info.topic;
            //     this.selectedCourseTime = this.info.courseTime;
            //     this.date = this.info.date;
            //     this.startTime = this.info.startTime;
            //     this.endTime = this.info.endTime;
            //     this.courseTime = this.info.courseTime;
            //     this.isHide = this.info.isHide == 1;
            //     if ((this.info.staffId == null || this.info.staffId == '') &&
            //         (this.info.partTimeTeacherName != null && this.info.partTimeTeacherName != '')) {
            //         this.teacherType = 1;
            //     } else {
            //         this.teacherType = 0;
            //     }
            //     if (this.info.courseId != null && this.info.courseId != '') {
            //         var selectedCourse;
            //         for (var i = 0; i < this.courses.length; i++) {
            //             if (this.courses[i].id == this.info.courseId) {
            //                 selectedCourse = this.courses[i];
            //                 break;
            //             }
            //         }
            //         this.topics = JSON.parse(selectedCourse.topics);
            //     }
            // }
            // if (this.date == null) {
            //     this.date = $.format.date(new Date(), "yyyy-MM-dd")
            // }
            // if (this.info.limit != null) {
            //     this.isLimit = (this.info.limit > 0);
            //     this.selectedLimit = this.info.limit;
            // }
        },
        methods: {
            submit(ignoreConflict) {
                var self = this;
                // var h1 = self.startTime.split(":")[0];
                // var m1 = self.startTime.split(":")[1];
                // var h2 = self.endTime.split(":")[0];
                // var m2 = self.endTime.split(":")[1];
                // if ((h1 > h2) || (h1 == h2 && m1 >= m2)) {
                //     msg("起始时间不能大于等于结束时间");
                //     return;
                // }
                for (var i = 0; i < self.topicsToAdd.length; i++) {
                    if (self.topicsToAdd[i].date == null || self.topicsToAdd[i].date == '') {
                        remind("请输入 " + self.topicsToAdd[i].name + " 的日期");
                        return;
                    }
                    if (self.topicsToAdd[i].startTime == null || self.topicsToAdd[i].startTime == '') {
                        remind("请输入 " + self.topicsToAdd[i].name + " 的时间");
                        return;
                    }
                }
                var topicsJson = JSON.stringify(self.topicsToAdd);

                var studentIds = '';
                this.multipleSelectionList1.forEach(row => {
                    studentIds = studentIds + row.id + ',';
                });

                var map = {
                    // arrangeId: self.info.id,
                    courseId: self.info.courseId,
                    topicsJson: topicsJson,
                    // staffId: self.info.staffId,
                    // partTimeTeacherName: self.info.partTimeTeacherName,
                    classroom: self.info.classroom,
                    schoolId: self.info.schoolId,
                    limit: self.isLimit ? self.selectedLimit : 0,
                    isHide: self.isHide ? 1 : 0,
                    studentIds: studentIds
                };
                if (ignoreConflict) {
                    map['ignoreConflict'] = 1;
                }
                var param = Qs.stringify(map);
                loading();
                axios({
                        url: '/jh/admin/arrange/submitWithMultiTopics',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            endLoading();
                            window.location.href = "/jh/admin/arrange/list";
                            // msg("登录成功");
                        } else {
                            endLoading();
                            confirm(response.data.msg, "确定", function() {
                                self.submit(true);
                            });
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("提交失败");
                        console.log(error);
                    });
            },
            changeCourse(val) {
                // if (this.topicsToAdd.length > 0 && this.topicsToAdd[0].name != '') {
                // }
                var selectedCourse;
                for (var i = 0; i < this.courses.length; i++) {
                    if (this.courses[i].id == val) {
                        selectedCourse = this.courses[i];
                        break;
                    }
                }
                this.topics = JSON.parse(selectedCourse.topics);

                // this.topicsToAdd = [{ name: '', date: '', startTime: '', courseTime: selectedCourse.courseTime }];
                this.topicsToAdd = new Array();
                for (var i = 0; i < this.topics.length; i++) {
                    this.topicsToAdd.push({ name: this.topics[i], date: '', startTime: '', courseTime: selectedCourse.courseTime, staffId: null, type: 0, teacherName: '' })
                }
                this.isLimit = selectedCourse.limit > 0;
                this.selectedLimit = selectedCourse.limit;
            },
            addTopic() {
                this.topicsToAdd.push({ name: '', date: '', startTime: '', courseTime: 60 });
            },
            delTopic(index) {
                this.topicsToAdd.splice(index, 1);
            },
            searchStudent() {
                var self = this
                var keyword = self.keyword
                var param = Qs.stringify({
                    keyword: keyword
                });
                param['tag'] = self.selectedTab;
                if (self.selectedTab != '全部') {
                    param = Qs.stringify({
                        keyword: keyword,
                        tag: self.selectedTab
                    });
                }
                loading();
                axios({
                        url: '/jh/admin/student/search',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        endLoading();
                        if (response.data.status == 200) {
                            // console.log(response.data.info)
                            self.list1 = response.data.info
                        } else {
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("加载失败");
                        console.log(error);
                    });
            },
            onCancelStudent() {
                var self = this;
                var ids = ''
                if (this.multipleSelectionList2.length == 0) {
                    return;
                }
                this.multipleSelectionList2.forEach(row => {
                    for (var i = 0; i < self.list2.length; i++) {
                        if (self.list2[i].id == row.id) {
                            self.list2.splice(i, 1);
                        }
                    }
                });
            },
            onAddStudent() {
                var self = this;
                var ids = ''
                self.multipleSelectionList1.forEach(row => {
                    var result = self.checkExist(self.list2, row)
                    if (!result) {
                        self.list2.push(row);
                    }
                });
                if (self.list2.length > self.selectedLimit) {
                    self.selectedLimit = self.list2.length
                }
            },
            checkExist(list, item) {
                for (var i = 0; i < list.length; i++) {
                    if (Number(list[i].id) == Number(item.id)) {
                        return true;
                    }
                }
                return false;
            },
            onTabChange(tab, event) {

            },
            onSelectedStudent1Change(val) {
                this.multipleSelectionList1 = val
            },
            onSelectedStudent2Change(val) {
                this.multipleSelectionList2 = val
            },
            back() {
                window.history.back();
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .topic-list {
        position: relative;
    }

    .topic-item {
        position: relative;
        padding-top: 22px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .topic-del {
        position: absolute;
        top: 22px;
        right: 22px;
        cursor: pointer;
        font-size: 1.5em;
    }

    .topic-add {
        padding: 0 0 10px 100px;
    }

    .table-container {
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid #dcdfe6;
    }

    .buttons {
        margin-top: 1rem;
    }

    .added-info {
        font-size: 14px;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>